<template>
<div class="main_body">
    <header >
        <a @click="$api.goBack()" class="back"></a>
        <span>个人资料</span>
        <a class="add" @click="back()" >保存</a>
    </header>
    <div class="wrap">
        <span @click="changePhoto()">
            <mt-cell class="cell" title="头像"   >
                <span  ><img class="school_img"  :src="$api.formatterImg(useInfo.userPhoto)"/></span>
            </mt-cell>
        </span>
        <mt-cell class="cell" title="姓名" >
            <span ><input class="service_school" @change="changeValue" v-model="useInfo.userName" placeholder="请输入名称" /></span>
        </mt-cell>
        <mt-cell class="cell" title="昵称" >
            <span ><input class="service_school" @change="changeValue" v-model="useInfo.nickName" placeholder="请输入昵称" /></span>
        </mt-cell>
        <mt-cell class="cell" title="电话号码" >
            <span ><input class="service_school" readonly v-model="useInfo.phone" placeholder="请输入电话号码" /></span>
        </mt-cell>
    </div>
    <input type="file" id="uploads" style="display:none;" accept="image/png, image/jpeg, image/gif, image/jpg" @change="uploadImg($event, 2)">
    <mt-actionsheet
        :actions="actions"
        v-model="sheetVisible">
    </mt-actionsheet>
</div>
</template>

<script>
    import {
        MessageBox
    } from 'mint-ui';
    export default {
        data() {
            return {
                example2: {
                    img: 'http://ofyaji162.bkt.clouddn.com/bg1.jpg',
                    info: true,
                    size: 1,
                    outputType: 'jpeg',
                    canScale: false,
                    autoCrop: true,
                    // 只有自动截图开启 宽度高度才生效
                    autoCropWidth: 300,
                    autoCropHeight: 250,
                    // 开启宽度和高度比例
                    fixed: true,
                    fixedNumber: [4, 3]
                },
                actions: [{
                    name: '拍照',
                    method: this.paizhao
                }, {
                    name: '从相册中选择',
                    method: this.selectImg
                }],
                sheetVisible: false,
                useInfo: '',
            }
        },
        methods: {
            paizhao() {
                this.$api.getImage((p, url) => {
                    this.example2.img = url
                    sessionStorage.setItem('exampleImg', JSON.stringify(this.example2.img));
                    this.$router.push({
                        'path': '/cropper'
                    })
                })
                console.log('拍照');
            },
            changeValue() {
                var detail = this.useInfo;
                sessionStorage.setItem('detail', JSON.stringify(detail));
            },
            selectImg() {
                document.getElementById("uploads").click();
            },
            uploadImg(e, num) { //从相册选取文件
                var file = e.target.files[0]
                if (!/\.(gif|jpg|jpeg|png|bmp|GIF|JPG|PNG)$/.test(e.target.value)) {
                    alert('图片类型必须是.gif,jpeg,jpg,png,bmp中的一种')
                    return false
                }
                var reader = new FileReader()
                reader.onload = (e) => {
                        let data
                        if (typeof e.target.result === 'object') {
                            // 把Array Buffer转化为blob 如果是base64不需要
                            data = window.URL.createObjectURL(new Blob([e.target.result]))
                        } else {
                            data = e.target.result
                        }
                        if (num === 1) {
                            this.option.img = data
                        } else if (num === 2) {
                            this.example2.img = data
                            sessionStorage.setItem('exampleImg', JSON.stringify(this.example2.img));
                            this.$router.push({
                                'path': '/cropper'
                            })
                        }
                    }
                    // 转化为base64
                    // reader.readAsDataURL(file)
                    // 转化为blob
                reader.readAsArrayBuffer(file)
            },
            changePhoto() {
                this.sheetVisible = true;
            },
            getUseInfo() {
                var detail = JSON.parse(sessionStorage.getItem('detail'));
                if (detail) {
                    this.useInfo = detail;
                    return;
                }
                this.useInfo = JSON.parse(sessionStorage.getItem('useInfo'));
            },
            back() {
                var params = {
                    userName: this.useInfo.userName,
                    nickName: this.useInfo.nickName,
                    phone: this.useInfo.phone,
                    userId: this.useInfo.userId,
                    userTypeId: this.useInfo.userTypeId,
                }
                for (var i in params) {
                    if (!params[i] || params[i].toString().trim().length == 0) {
                        switch (i) {
                            case 'userName':
                                MessageBox('提示', '姓名不能为空');
                                return;
                                break;
                            case 'phone':
                                MessageBox('提示', '电话号码不能为空');
                                return;
                                break;
                        }
                    }
                }
                var filepath = JSON.parse(sessionStorage.getItem('imgOption'));

                if (filepath) {
                    params.userPhoto = filepath.filePath;
                }
                var url = '/userInfo/edit'
                this.$api.post(url, params, (data) => {
                    MessageBox('提示', '修改成功');
                    //this.useInfo.userPhoto = data.info
                    sessionStorage.setItem('useInfo', JSON.stringify(this.useInfo));
                    console.log(JSON.parse(JSON.stringify(data)));
                    this.$api.goBack();
                })
            }
        },
        created() {
            this.getUseInfo();
            var filepath = JSON.parse(sessionStorage.getItem('imgOption'));
            if (filepath) {
                this.useInfo.userPhoto = filepath.filePath;
            }
        },

    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
    .main_body {
        background: white;
        height: 100%;
    }
    
    .wrap {
        text-align: left;
        background: white;
    }
    
    .row {
        display: flex;
        padding: 0.4rem 0.5rem;
        font-size: 16px;
    }
    
    .school_img {
        width: 2rem;
        margin: 0.3rem 0;
    }
    
    .wrap .cell {
        padding-left: 0.4rem;
        border-bottom: 1px solid #f2f2f2;
        padding-right: 0.4rem;
    }
    
    .scool_wrap {
        padding: 0.1rem 0.4rem 0.4rem;
        border-bottom: 1px solid #f2f2f2;
    }
    
    .scool_wrap .title {
        height: 1.2rem;
        padding: 0 10px;
        line-height: 1.2rem;
        font-size: 16px;
        text-align: left;
    }
    
    .imgwrap {
        display: flex;
        padding-left: 0.3rem;
    }
    
    .imgwrap img {
        height: 1.3rem;
        margin-right: 0.2rem;
    }
    
    .textarea_wrap {
        padding-right: 0.2rem;
        padding-left: 0.3rem;
    }
    
    .textarea_wrap textarea {
        padding: 0.2rem;
        background: #f6f6f6;
        border: none;
        width: 100%;
        height: 3rem;
        font-size: 0.4rem;
    }
    
    .service_school {
        background: none;
        border: none;
        outline: none;
        text-align: right;
    }
</style>